<template>
  <div class="pages">
    <div class="iconfont icon-jiantou_xiangzuoliangci" @click="update_articles2(-1)"></div>
    <div
      :class="$store.state.page === item ? 'page' : ''"
      v-for="item in pages"
      :key="item"
      @click="update_articles(item)"
    >
      {{ item }}
    </div>
    <div class="iconfont icon-jiantou_xiangyouliangci" @click="update_articles2(1)"></div>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
export default {
  mounted() {
    this.getArticle_Count();
  },
  computed:{
    pages(){
      let pageNo = this.$store.state.page;
      let pageNos = this.$store.state.pages;
      if(pageNo<=5 && pageNos>6){
        return [1,2,3,4,5,6,'...',pageNos];
      }else if(pageNo>pageNos-5 && pageNos>6){
        return [1,'...',pageNos-4,pageNos-3,pageNos-2,pageNos-1,pageNos];
      }else if(pageNos>6){
        return [1,'...',pageNo-2,pageNo-1,pageNo,pageNo+1,pageNo+2,'...',pageNos];
      }
      return pageNos
    }
  },
  methods: {
    ...mapActions(["getArticle_Count", "get_Articles"]),
    ...mapMutations(["update_page", "forwardBackward_page"]),
    update_articles(index) {
      if (this.$store.state.page === index) return;
      if (index === "...") return;
      this.update_page(index);
      this.get_Articles({ page: index, pagesize: this.$store.state.pagesize });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    },
    update_articles2(val){
      if(val === 1){
        if(this.$store.state.page === this.$store.state.pages) return;        
      }else{
        if(this.$store.state.page === 1) return;
      }
      this.forwardBackward_page(val);
      this.get_Articles({ page: this.$store.state.page, pagesize: this.$store.state.pagesize });
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  },
};
</script>

<style lang="less">
.pages {
  display: flex;
  div {
    font-weight: 600;
    font-size: 21px;
    margin-left: 5px;
    margin-bottom: 5px;
    text-align: center;
    line-height: 40px;
    width: 40px;
    height: 40px;
    background-color: rgba(85, 232, 255, 0.465);
    box-shadow: 0 0 5px 2px rgb(77, 77, 77);
    border-radius: 10px;
    cursor: pointer;
  }
  .page {
    background-color: rgba(2, 34, 94, 0.581);
    box-shadow: 0 0 5px 2px rgb(3, 177, 177);
  }
}
</style>